
import React, { useEffect, useImperativeHandle, useState } from "react";
import styles from "../style/Hook.module.scss";
let HookTipsTime = null;
const HookTips = ({
    onRef
}) => {
    const [content, setContent] = useState(null);
    const [show, setShow] = useState(false);

    // 开始倒计时
    const startGetTime = () => {
        HookTipsTime = setTimeout(() => {
            setShow(false);
            setContent(null);
        }, 1500)

    }


    const showTips = ({
        content
    }) => {
        // 清除倒计时;
        clearTimeout(HookTipsTime);
        setContent(content);
        setShow(true);
        startGetTime();



    }

    useImperativeHandle(onRef, () => {
        return {
            showTips: showTips
        }
    })


    return (
        <div className={styles.box} style={{ display: show ? "block" : "none" }}>
            <div className={"hooktips"}>
                <span className="content">
                    {content}
                </span>
            </div>
        </div>


    )



}

export default HookTips;